<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData">
      <template #violantionCode="{ record }">
        <!-- 已删除，无法点击 -->
        <template v-if="record.deleteFlag == 1">{{ record.violantionCode }}</template>
        <a v-else @click="viewDetail(record)" class="link">{{ record.violantionCode }}</a>
      </template>
      <template #memberInfo="{ record }">
        <memberInfo :record="record" />
      </template>
    </table-index>
  </div>
</template>

<script setup lang="ts" name="CarViolationSmsLogs">
  import { computed, onMounted, reactive } from 'vue'
  import { useExport } from '@/hooks/list'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import memberInfo from '@/views/assets/compnoents/memberInfo.vue'
  import { usePageDict } from '@/hooks/useDict'
  import { getSmsList, exportSmsList } from '@/api/asset/carViolation.js'
  import useNavigate from '@/hooks/useNavigate'
  import { usePermission } from '@/hooks/usePermission'
  import { Message } from '@arco-design/web-vue'

  interface queryParamInterface {
    licenseNoLike?: string
    eventTimeRange?: String[]
    eventTimeStart?: string
    eventTimeEnd?: string
    memberName?: string
    queryStatusList?: Number[]
    violationCodeLike?: string
    memberPhone?: string
  }

  const { navigateTo } = useNavigate()

  // 接口参数（不包含page信息）
  const queryParam: queryParamInterface = reactive({})
  const dict = usePageDict('carviolationDict')

  const searchList = computed(() => [
    { label: '车牌号', prop: 'licenseNoLike', type: 'a-input' },
    {
      label: '违章时间',
      prop: 'eventTimeRange',
      type: 'i-range-picker',
      change: (value = []) => {
        queryParam.eventTimeStart = value[0]
        queryParam.eventTimeEnd = value[1]
      },
    },
    { label: '承租人', prop: 'memberName', type: 'a-input' },
    { label: '违章状态', prop: 'eventStatusList', type: 'a-select', multiple: true, options: dict.ViolationEventStatusEnum },
    { label: '违章单号', prop: 'violationCodeLike', type: 'a-input' },
    { label: '承租人电话', prop: 'memberPhone', type: 'a-input' },
  ])
  // 查看违章详情
  const viewDetail = (record: any) => {
    if (usePermission('svms:asstes:operation:car-violation.detail')) {
      navigateTo(`/car-violation/detail/${record.id}`, `${record.licenseNo}-违章详情`)
    } else {
      Message.warning('您没有访问该页面的权限')
    }
  }

  // 导出事件
  const handleExport = () => {
    useExport(exportSmsList, queryParam)
  }

  const table = useTable({
    columns: [
      {
        title: '违章单号',
        dataIndex: 'violantionCode',
        slotName: 'violantionCode',
        width: 150,
        fixed: 'left',
      },
      {
        title: '车牌号',
        dataIndex: 'licenseNo',
      },
      {
        title: '违章时间',
        dataIndex: 'eventTime',
        width: 170,
      },
      {
        title: '承租人信息',
        slotName: 'memberInfo',
      },
      {
        title: '罚分',
        dataIndex: 'eventScore',
      },
      {
        title: '罚款',
        unit: '元',
        dataIndex: 'eventAmount',
      },
      {
        title: '违章城市',
        dataIndex: 'eventCityName',
      },
      {
        title: '违章状态',
        dataIndex: 'eventStatusStr',
      },
      {
        title: '短信发送时间',
        dataIndex: 'smsSendTime',
        width: 170,
      },
      {
        title: '发送内容',
        dataIndex: 'smsContent',
        width: 240,
      },
    ],
    buttons: [
      {
        mode: 'import',
        label: '导出',
        permission: 'svms:asstes:violation:sms-logs.export',
        method: () => handleExport(),
      },
    ],
  })

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getSmsList)

  onMounted(() => {
    loadData()
  })
</script>

<style scoped lang="less">
  .link {
    cursor: pointer;
    color: rgb(24, 144, 255);
  }
</style>
